/* pages/myOrder/myOrder.wxss */

.page-my-order {
    background: #f2f2f2;
    // min-height: 100vh;

    .tabs {
        display: flex;
        // width: auto;
        padding: 0 18rpx;
        line-height: 74rpx;
        font-size: 25rpx;
        overflow-x: scroll;
        background: #fff;

        .tab {
            position: relative;
            margin: 0 30rpx;
            padding: 0 20rpx 5rpx;
            opacity: 0.35;
            white-space: nowrap;

            &.active {
                opacity: 1;

                //不支持::after
                &::after,
                .after {
                    position: absolute;
                    left: 0;
                    display: block;
                    width: 100%;
                    height: 5rpx;
                    background: #000;

                }
            }
        }
    }

    .order-list {
        flex: 1;
        // box-sizing: border-box;
        overflow: scroll;
    }

    .items {
        // flex: 1;
        box-sizing: border-box;
        padding: 14rpx 50rpx 100rpx;

        .item {
            // position: relative;
            display: flex;
            align-items: center;
            padding: 38rpx 0 32rpx;
            border-bottom: 1px solid rgba(112, 112, 112, 0.3);

            image {
                width: 168rpx;
                min-width: 168rpx;
                margin-right: 20rpx;
            }

            .info {
                flex: 1;
                padding-top: 20rpx;
                overflow: hidden;
            }

            .name {
                margin-bottom: 56rpx;
                line-height: 40rpx;
                // line-height: 32rpx;
                // white-space: nowrap;
                // overflow: hidden;
                // text-overflow: ellipsis;
                // height: 64rpx;
            }

            .des {
                margin: 38rpx 0 18rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }

            .price {
                display: flex;
                justify-content: space-between;
                font-size: 20rpx;
            }

            .count {
                // position: absolute;
                display: flex;
                justify-content: flex-end;
                align-items: center;
                margin-top: 10rpx;
                font-size: 20rpx;

                text {
                    margin-left: 20rpx;
                }

                .count-price {
                    display: flex;
                    align-items: center;
                    margin-left: 20rpx;
                    font-size: 30rpx;
                }
            }

            .greyText {
                font-size: 20rpx;
                color: rgba(0, 0, 0, 0.5);
            }
        }
    }

    .tip {
        // width: 100%;
        padding: 20rpx 0;
        font-size: 28rpx;
        text-align: center;
    }

    .no-order {
        padding: 40% 0 0;
        font-size: 28rpx;
        text-align: center;
    }
}